<template>
	<view class="uni_box home">
		<navbar title='个人资料'>
		</navbar>
		<view class="content">
			<view class="zlist">
				<image class="mtous" src="/static/CJYM_png.png" />
				<text class="xiugai">修改头像</text>
			</view>
			<view class="zlist">
				<text class="niname">昵称</text>
				<u-input class="uinput" v-model="name" type="text" :border="border" placeholder='请输入' />
				<image class="mfan ml" src="/static/icon_next.png" />
			</view>
			<view class="zlist">
				<text class="niname">手机号</text>
				<u-input class="uinput" v-model="name" type="text" :border="border" placeholder='请输入' />
				<image class="mfan ml" src="/static/icon_next.png" />
			</view>
			<view class="zlist">
				<text class="niname">真实姓名</text>
				<u-input class="uinput" v-model="name" type="text" :border="border" placeholder='请输入' />
				<image class="mfan ml" src="/static/icon_next.png" />
			</view>
			<view class="zlist">
				<text class="niname">职位</text>
				<u-input class="uinput" v-model="name" type="text" :border="border" placeholder='请输入' />
				<image class="mfan ml" src="/static/icon_next.png" />
			</view>
			<view class="zlist" @click="timeshow=true">
				<text class="niname">出生日期</text>
				<text class="xuanze">请选择</text>
				<image class="mfan ml" src="/static/icon_next.png" />
			</view>

			<view class="zlist" >
				<text class="niname">性别</text>
				<view class="xingright ml">
					<u-radio-group v-model="value" @change="radioGroupChange">
						<u-radio 
							@change="radioChange" 
							v-for="(item, index) in xlist" :key="index" 
							:name="item.name"
							:disabled="item.disabled"
							style="margin-left: 30rpx;"
							active-color="#212121"
						>
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="zlist">
				<text class="niname">个人简介</text>
				<u-input class="uinput" v-model="name" type="text" :border="border" placeholder='请输入' />
				<image class="mfan ml" src="/static/icon_next.png" />
			</view>

			<view class="quedin">
				<view class="queren">确认</view>
			</view>
		</view>

		<u-picker mode="time" v-model="timeshow"  :default-selector="[0]"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				border:false,
				name:'',
				timeshow:false,
				xlist: [
					{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '男',
			}
		},
		onLoad() {
			
		},
		onShow() {
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		padding: 0 30rpx 30rpx;
		.zlist{
			padding: 20rpx 0;
			border-bottom: 1rpx solid #eee;
			display: flex;
			align-items: center;
			flex-direction: row;
			min-height: 110rpx;
			.mtous{
				width: 125rpx;
				height: 125rpx;
				border-radius: 50%;
				margin-right: 60rpx;
			}
			.xiugai{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
			.niname{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
				width: 120rpx;
				margin-right: 30rpx;
			}
			.uinput{
				margin-right: 30rpx;
			}
			.ml{
				margin-left: auto;

			}
			.mfan{
				width: 20rpx;
				height: 24rpx;
			}
			.xuanze{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
		.zlist:last-child{
			border-bottom: none;
		}
		.quedin{
			margin: 130rpx 30rpx 50rpx;
			height: 88rpx;
			background: #AC1F33;
			border-radius: 10rpx;
			display: flex;
			align-items:center;
			justify-content: center;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>
